<template>
	<view class="recommend">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="swiperImg" src="https://t7.baidu.com/it/u=3248413060,1409880777&fm=193&f=GIF" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="swiperImg" src="https://t7.baidu.com/it/u=91844991,1983235714&fm=193&f=GIF" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="swiperImg" src="https://t7.baidu.com/it/u=2397542458,3133539061&fm=193&f=GIF" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="swiperImg" src="https://t7.baidu.com/it/u=3980489931,4090080080&fm=193&f=GIF" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 三个小图标 -->
		<view class="policyList">
			<view class="policyItem" v-for="(item,index) in indexData.policyDescList" :key="index">
				<image class="policyImg" :src="item.icon" mode=""></image>
				<text class="policyText">{{item.desc}}</text>
			</view>
		</view>
		
		<!-- 10个导航图标 -->
		<view class="kingkongList">
			<view class="kingkongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.l1Id">
				<image class="kingkongimg" :src="item.picUrl" mode=""></image>
				<view class="kingkongDesc">
					{{item.text}}
				</view>
			</view>
		</view>
		
		<!-- 分类区 -->
		<view class="categoryList">
			<view class="categoryItem" v-for="item in indexData.categoryModule" :key="item.titlePicUrl">
				<image class="categoryImg" :src="item.titlePicUrl" mode=""></image>
				<scroll-view class="categoryScroll" scroll-x="true" enable-flex>
					<view class="goodsItem" v-for="goodsItem in item.itemList" :key="goodsItem.id">
						<image class="goodsImg" :src="goodsItem.showPicUrl" mode=""></image>
						<view class="goodsText">
							{{goodsItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('home', ['indexData'])
		},
	}
</script>

<style lang="less">
.recommend {
	.swiper {
		height: 350rpx;
		.swiperImg {
			width: 100%;
			height: 350rpx;
		}
		
	}
	.policyList {
		display: flex;
		margin: 10rpx 0;
		.policyItem {
			flex: 1;
			text-align: center;
			.policyImg {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
			.policyText {
				font-size: 26rpx;
			}
		}
	}
	.kingkongList {
		display: flex;
		flex-wrap: wrap;
		.kingkongItem {
			width: 20%;
			text-align: center;
			margin: 10rpx 0;
			.kingkongimg {
				width: 100rpx;
				height: 100rpx;
			}
			.kingkongDesc {
				font-size: 24rpx;
				
			}
		}
	}
	.categoryList {
		.categoryItem {
			margin: 10rpx 0;
			.categoryImg {
				width: 100%;
				height: 370rpx;
			}
			.categoryScroll {
				height: 300rpx;
				display: flex;
				white-space: nowrap;
				.goodsItem {
					height: 300rpx;
					margin: 0 10rpx;
					.goodsImg {
						width: 200rpx;
						height: 200rpx;
						background-color: #f5f5f5;
					}
					.goodsText {
						// 设置超出两行显示...
						font-size: 26rpx;
						white-space: pre-wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}
}
</style>
